@import "@/styles/_var.scss";

.content-wrapper {
  margin-top: -42px;
  overflow: hidden;
  background-color: var(--gray-8);
  border-radius: $card-border-radius $card-border-radius 0 0;
  opacity: 0.98;
}

.place-base-box {
  padding: $gutter;
  color: var(--gray-1);

  .place-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: $gutter * 0.5;
    .title-text {
      font-size: $font-size-xl;
      padding-right: $gutter;
    }
  }
  
  .tip-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-top: 8px;
    align-items: center;
    box-sizing: border-box;
  }
  
  .tip-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    
    .tip-title {
      color: var(--gray-2);
      padding-left: 2px;
    }
  }
  
  .tip-item-text {
    color: var(--gray-1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  
  
  .tip-box-both {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 8px;
    box-sizing: border-box;
    
    .tip-title-wrapper {
      width: unset;
      .tip-title {
        color: var(--gray-2) !important;
      }
    }
  }
  .tip-btn {
    padding: 1px 6px;
    border: 1px solid var(--brand-2);
    border-radius: 18px;
    background: linear-gradient(45deg, var(--brand-3), lighten($brand-3, 20%));
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: $font-size-sm;
    
    .tip-btn-text {
      color: var(--brand-2);
      padding-left: 4px;
    }
  }
  
  .tip-box-half {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    
    .tip-item-wrapper {
      padding-top: $gutter * 0.5;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      .tip-item-title {
        color: var(--gray-2);
        padding-right: 4px;
      }
      &.full {
        width: 100%;
      }
    }
  }
  
  .tip-tag-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    
    .tip-tag-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      .tip-tag-item-title {
        position: relative;
        padding: 0 $gutter * 0.5;
        &::after {
          content: "";
          height: 12px;
          width: 1px;
          position: absolute;
          top: 4px;
          right: -1px;
          border-right: 2px solid var(--gray-3);
        }
        
        &:last-child {
          padding-right:0;
        }
        &:last-child::after {
          display: none;
        }
      }
    }
  }
}

.plac-map-box {
  height: 400rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--white);
  margin-bottom: $gutter;
  border-radius: 12px;
  
  map {
    width: 100%;
    height: 400rpx;
  }
}

.place-sections {
  margin: $gutter 0 $gutter * 2 0;
  padding: $gutter;
  background-color: var(--white);
  border-radius: $card-border-radius;
  
  .place-section {
    
    .desc-wrapper {
      padding: $gutter 0;
      .desc-text {
        padding-bottom: 8px;
        line-height: 1.5;
        color: var(--gray-2);
      }
      
      .desc-li {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        
        &:first-child {
          border-top: 1px solid var(--gray-5);
        }
        
        .desc-li-title {
          padding: 6px;
          word-wrap: break-word;
          width: 20%;
          border: 1px solid var(--gray-5);
          border-top: none;
          background-color: var(--gray-8);
          
        }
        .desc-li-content {
          flex-grow: 1;
          padding: 6px;
          width: 80%;
          word-wrap: break-word;
          border: 1px solid var(--gray-5);
          border-top: none;
          border-left: none;
        }
      }
    }
  }
}
  
